<template>
  <div class="filter-wildcard-match">
    <div class="header">
      <span 
        v-for="tab in tabData" 
        :key="tab.key" 
        :class="{'tabs': true, 'active': activeKey === tab.key}"
        @click="toggleTabKey(tab)"
      >
        {{tab.name}}
      </span>
    </div>
    <a-input v-model="inputValue" size="small" class="search-box" @change="onInputValueChange" @pressEnter="onInputValueChange"/>
    匹配选项：
    <br />
    <a-radio-group v-model="filterType" @change="onWildcardTypeChange">
      <a-radio :style="radioStyle" value="like">包含</a-radio>
      <a-radio :style="radioStyle" value="start">开头为</a-radio>
      <a-radio :style="radioStyle" value="=">精确匹配</a-radio>
      <!-- <a-radio :style="radioStyle" value="not like">不包含</a-radio> -->
    </a-radio-group>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import { IColumn, IKeyValueStore } from '@/store/modules/dataview'
import { StatisticsAction } from '@/util/data-selection-actions'


@Component
export default class FilterWildcardMatch extends Vue {
  @Prop() column!: IColumn
  @Prop() editData!: any
  @Prop({default: false}) isEdit!: boolean
  @Prop({default: ''}) parentTableName!: boolean
  private inputValue:string = ''
  private radioStyle = {
    display: 'block',
    height: '24px',
    lineHeight: '24px',
  }

  private activeKey:'like' | 'not like' = 'like'
  private activeKeyMapping:any = {
    '~': 'like',
    'starts with': 'like',
    '=': 'like',
    '!~': 'not like',
    'not starts with': 'not like',
    '<>': 'not like'
  }
  private tabData: any = [
    {
      name: '只保留',
      key: 'like'
    },
    {
      name: '排除',
      key: 'not like'
    }
  ]
  private wildcardMapping:any = {
    'like': '包含',
    'start': '开头为',
    '=': '精确匹配'
  }
  private filterType:string = 'like'

  private get formatFilterType() {
    let type = ''
    switch(this.filterType) {
      case 'like': // 包含
        type = this.activeKey === 'like' ? '~' : '!~'
        break
      case 'start': // 开头为
        type = this.activeKey === 'like' ? 'starts with' : 'not starts with'
        break
      case '=':
        type = this.activeKey === 'like' ? '=' : '<>'
        break
      default:
        break
    }
    return type
  }

  @Watch('editData', { immediate: true , deep: true})
  private onCurrentHistory(newValue: IKeyValueStore) {
    if (!newValue || !this.isEdit) {
      return
    }
    const history = newValue.data
    if (history.actionType === StatisticsAction.filterWildcard && history.filter[0][0].col === this.column.name) {
      const data = history.filter[0][0]
      this.activeKey = this.activeKeyMapping[data.filterType] 
      this.inputValue = (data.values[0] || '').replace(/%/g, '')
      this.filterType = data.wildcardType
    }
  }

  /**
   * 通配符匹配
   */
  onInputValueChange() {
    const inputValue = this.inputValue.trim()
    if (!inputValue) {
      return
    }
    this.$emit('on-filter-params-change', {
      data: {
        action: 'FILTER',
        col: this.column.name,
        filter: [ // 抛出最终用于筛选的选项值
          [{
            col: this.column.name,
            filterType: this.formatFilterType,
            values: [inputValue],
            wildcardType: this.filterType
          }]
        ],
        description: `${this.activeKey === 'like' ? '只保留' : '排除'}：${this.wildcardMapping[this.filterType]}${inputValue}的值`,
        actionType: StatisticsAction.filterWildcard,
      },
    })
  }

  /**
   * format成查询的格式
   */
  formatSearchValue(value: string):string {
    let formatValue = ''
    switch(this.filterType) {
      case 'start': 
        formatValue = `${value}%`
        break
      case 'like':
      case 'not like':
        formatValue = `%${value}%`
        break
      case '=':
        formatValue = value
        break
      default:
        formatValue = value
    }
    return formatValue
  }


  onWildcardTypeChange() {
    this.onInputValueChange()
  }

  toggleTabKey(tab:any) {
    this.activeKey = tab.key
    this.onInputValueChange()
  }
}
</script>
<style lang="less" scoped>
.filter-wildcard-match {
  height: 100%;

  .header {
    align-items: center;
    background-color: #fff;
    border-bottom: 1px solid rgba(233, 233, 233, 0.8);
    color: #373b52;
    display: flex;
    font-size: 14px;
    height: 25px;
    justify-content: space-between;
    line-height: 26px;
    margin-bottom: 8px;
    padding: 0 12px;
    width: 100%;

    .tabs {
      cursor: pointer;
      display: inline-block;
      height: 25px;
      margin-right: 8px;
      padding: 0 16px;

      &.active {
        border-bottom: 2px solid #5963e5;
        color: #5963e5;
        font-weight: 500;
      }
    }
  }

  .search-box {
    margin-bottom: 8px;
  }
}
</style>